<template>
  <div class="goods-box2">
    <div class="search">
      <div class="search-container">
        <el-input
          v-model="searchValue"
          maxlength="100"
          clearable
          class="search-input"
        />
        <img
          src="../assets/img/search.png"
          @click="handleSearch"
          class="search-icon"
        />
      </div>
      <div class="hot-search">
        <span>热门搜索：</span>
        <template v-for="(tag, index) in hotTags" :key="index">
          <a class="tag-item" @click="handleTopicDetail(tag)">
            {{ tag }}
          </a>
        </template>
      </div>
    </div>
    <div
      v-for="item in goods"
      :key="item.orderId"
      class="goods"
      @click="detailsClick(item)"
    >
      <img :src="getImageUrl(item.picture || 'wutu.gif')" class="goods-img" />
      <div class="info">
        <p class="content">
          <i :class="item.type === 'goods' ? 'supply' : 'demand'">
            [{{ item.type === "goods" ? "供" : "需" }}]
          </i>
          <span class="content-text">{{ item.content }}</span>
        </p>
        <span class="price" v-if="item.price"><i>￥</i>{{ item.price }} </span>
        <span class="initiator">
          {{ item.ownName }} | {{ formatTimer(item.createTime) }}
        </span>
      </div>
    </div>
    <Pagination />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import Pagination from "../components/Pagination.vue";

const searchValue = ref("");
const hotTags = ["苹果", "新疆哈密瓜", "樱桃"];

import { useOrdersStore } from "@/stores/order";

const goods = ref([]);
const ordersStore = useOrdersStore();
goods.value = ordersStore.orders.records;

// 重新获取商品列表
import { watch } from "vue";

watch(
  () => ordersStore.orders.records,
  (newRecords) => {
    goods.value = newRecords;
  }
);

import { searchAlIByCondition } from "@/api/order";
function handleSearch() {
  searchAlIByCondition({
    content: searchValue.value,
  }).then((res) => {
    ordersStore.setOrders(res.data);
  });
}

function handleTopicDetail(tag) {
  searchValue.value = tag;
  handleSearch();
}

function getImageUrl(picture) {
  return new URL(`../assets/file/order/${picture}`, import.meta.url).href;
}

function formatTimer(value) {
  let date = new Date(value);
  let y = date.getFullYear();
  let MM = date.getMonth() + 1;
  MM = MM < 10 ? "0" + MM : MM;
  let d = date.getDate();
  d = d < 10 ? "0" + d : d;
  let h = date.getHours();
  h = h < 10 ? "0" + h : h;
  let m = date.getMinutes();
  m = m < 10 ? "0" + m : m;
  let s = date.getSeconds();
  s = s < 10 ? "0" + s : s;
  return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
}

function detailsClick(item) {
  // store.commit("updateOrderId", item.orderId);
  router.push(`/home/details?orderId=${item.orderId}`);
}
</script>

<style lang="scss" scoped>
@import "element-plus/theme-chalk/el-input.css";

.search {
  width: 780px;
  height: 80px;
  background-color: white;
  padding: 10px 20px;
  // border: 1px solid #dcdcdc;
  border-radius: 5px;
  // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;

  .search-container {
    display: flex;
    // justify-content: space-between;
    align-items: center;

    .search-input {
      width: 290px;
      height: 40px;
      border-radius: 4px;
      line-height: 40px; // 确保文字垂直居中
    }

    .search-icon {
      cursor: pointer;

      height: 40px; // 与搜索框高度一致
      width: 40px; // 设置固定宽度
      background-color: #f0f0f0; // 按钮背景色
      border-radius: 4px; // 按钮圆角
      transition: background-color 0.3s;

      &:hover {
        background-color: #e0e0e0; // 悬停效果
      }
    }
  }

  .hot-search {
    color: #696969;
    font-size: 12px;
    margin-top: 10px;

    .tag-item {
      margin-right: 10px;
      cursor: pointer;
      background-color: #f0f0f0;
      padding: 5px 10px;
      border-radius: 12px;
      transition: background-color 0.3s;

      &:hover {
        background-color: #e0e0e0;
      }
    }
  }
}

.goods {
  width: 780px;
  min-height: 120px;
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;

  .goods-img {
    width: 100px;
    height: 100px;
    margin-right: 20px;
    border-radius: 6px;
    object-fit: cover;
  }

  .info {
    flex: 1;
    display: flex;
    flex-direction: column;

    .initiator {
      color: #666;
      font-size: 12px;
    }

    .content {
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      .supply,
      .goods,
      .demand {
        color: #727674;
        font-size: 13px;
      }

      .content-text {
        font-size: 15px;
        margin-left: 10px;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #035d1c;
          text-decoration: none;
        }
      }
    }

    .price {
      font-size: 15px;
      font-weight: bold;
      color: red;
    }

    .initiator {
      margin-top: 10px;
    }
  }
}
</style>


